<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <!-- 最终结果 -->
  <h1>正确结果</h1>
  <div id="ans"></div>

  <h1> 如果没有设置width和height为0 </h1>
  <div id="wh"></div>

  <h1> 关于border的四个方向的分布 </h1>
  <div id="border"></div>

  <h1> 如果border-top的设置为0，或者不设置border-top </h1>
  <div id="border-top0"></div>

  <h1> 通过设置border-left和border-right来构建锐角三角形 </h1>
  <div id="acute-triangle"></div>

  <h1> 斜锐角三角形 </h1>
  <div id="oblique-triangle"></div>

  <h1> 直角三角形 </h1>
  <div id="right-triangle"></div>
</body>
<style>
  /* 注意，需要将width和（height）设为0 */
  h1 {
    text-align: center;
  }

  div{
    margin: auto;
  }

  #ans{
    width: 0;
    height: 0;
    border-right: 100px solid transparent;
    border-left: 100px solid transparent;
    border-top: 100px solid transparent;
    border-bottom: 100px solid greenyellow;
  }

  #wh {
    border-right: 100px solid transparent;
    border-left: 100px solid transparent;
    border-top: 100px solid transparent;
    border-bottom: 100px solid rgb(0, 119, 255);
  }

  #border {
    width: 0;
    height: 0;
    border-right: 100px solid rgb(168, 252, 43);
    border-left: 100px solid rgb(255, 171, 75);
    border-top: 100px solid rgb(167, 76, 167);
    border-bottom: 100px solid rgb(0, 119, 255);
  }

  #border-top0 {
    width: 0;
    height: 0;
    border-right: 100px solid rgb(168, 252, 43);
    border-left: 100px solid rgb(255, 171, 75);
    /* border-top: 0px solid rgb(167, 76, 167); */
    border-bottom: 100px solid rgb(0, 119, 255);
  }

  #acute-triangle{
    width: 0;
    height: 0;
    border-right: 40px solid transparent;
    border-left: 40px solid transparent;
    border-bottom: 100px solid rgb(0, 119, 255);
  }

  #oblique-triangle{
    width: 0;
    height: 0;
    border-right: 60px solid transparent;
    border-left: 40px solid transparent;
    border-bottom: 100px solid rgb(0, 255, 170);
  }

  #right-triangle {
    width: 0;
    height: 0;
    border-right: 160px solid transparent;
    border-bottom: 100px solid rgb(183, 60, 255);
  }
  
  
</style>
</html>